﻿Typps.SlidePane=function(element) {
    Typps.SlidePane.initializeBase(this,[element]);
    this._className=null;
    this._orientation=0;
    this._onSlideToggleDelegate=null;
    this._toggleButtonFloat=Typps.SlidePane.Float.Left;
    this._enableEffects=true;
    this._expanded=true;
}
Typps.SlidePane.prototype={
    get_className: function() {
        return this._className;
    },
    set_className: function(value) {
        this._className=value;
    },
    get_orientation: function() {
        return this._orientation;
    },
    set_orientation: function(value) {
        this._orientation=value;
    },
    get_toggleButtonFloat: function() {
        return this._toggleButtonFloat;
    },
    set_toggleButtonFloat: function(value) {
        this._toggleButtonFloat=value;
    },
    get_expanded: function() {
        return this._expanded;
    },
    set_expanded: function(value) {
        this._expanded=value;
    },
    get_enableEffects: function() {
        return this._enableEffects;
    },
    set_enableEffects: function(value) {
        this._enableEffects=value;
    },
    add_onSlideToggle: function(handler) {
        this.get_events().addHandler('slidetoggle',handler);
    },
    remove_onSlideToggle: function(handler) {
        this.get_events().removeHandler('slidetoggle',handler);
    },
    dispose: function() {
        if(this._toggleButton!=null&&this._onSlideToggleDelegate!=null) {
            Sys.UI.DomEvent.removeHandler(this._toggleButton,'click',this._onSlideToggleDelegate);
            delete this._onSlideToggleDelegate;
            this._onSlideToggleDelegate=null;
        }
        Typps.SlidePane.callBaseMethod(this,'dispose');
    },
    initialize: function() {
        Typps.SlidePane.callBaseMethod(this,'initialize');
        this._toggleButton=$get(this.get_id()+'_togglebutton');
        this._body=$get(this.get_id()+'_body');
        this._slideEffect=null;
        this._toggled=false;
        this._bodyWidth=this._getBodyWidth();
        if(this._onSlideToggleDelegate==null&&this._toggleButton!=null) {
            this._onSlideToggleDelegate=Function.createDelegate(this,this._onSlideToggleHandler);
            Sys.UI.DomEvent.addHandler(this._toggleButton,'click',this._onSlideToggleDelegate);
        }
        var style=null;
        if(this._orientation==1&&this._toggleButton!=null) {
            if(!this._expanded) 
                this._body.style.display='';

            style=Sys.UI.DomElement._getCurrentStyle(this._body);
            var height=parseInt(style.height);
            if(isNaN(height)||height<this._body.offsetHeight)
                height=this._body.offsetHeight;
            this._toggleButton.style.height=height+'px';
            /*Make tabuar layout optional just in case!*/
            this._useTabularLayout();
        }
        else if(this._orientation==0) {
            this._body.style.width=this._bodyWidth+'px';
        }
        if(!this._expanded)
            this._body.style.display='none';
    },
    _getBodyWidth: function() {
        var display=this._body.style.display;
        if(display=='none') {
            this._body.style.visibility='hidden';
            this._body.style.display='';
        }
        var style=Sys.UI.DomElement._getCurrentStyle(this._element);
        var width=parseInt(style.width);
        if(isNaN(width)||width<this._element.offsetWidth)
            width=this._element.offsetWidth

        this._body.style.visibility='visible';
        this._body.style.display=display;
        return width;
    },
    _useTabularLayout: function() {
        /*We want a snap effect. content should reclaim available space when the pane slides out of view
        tables solve this problem. */
        var table=document.createElement('table');
        table.border=0;
        table.cellSpacing=0;
        table.cellPadding=0;
        var tbody=document.createElement('tbody');
        var row=document.createElement('tr');
        var buttonColumn=document.createElement('td');
        var contentColumn=document.createElement('td');
        contentColumn.id=this.get_id()+'_bodycontainer';
        if(!this._expanded)
            contentColumn.style.display='none';
        buttonColumn.valign='top';
        contentColumn.valign='top';
        table.appendChild(tbody);
        tbody.appendChild(row);
        if(this._toggleButtonFloat==0) {
            row.appendChild(buttonColumn);
            row.appendChild(contentColumn);
        }
        else {
            row.appendChild(contentColumn);
            row.appendChild(buttonColumn);
        }
        buttonColumn.appendChild(this._toggleButton.parentNode.removeChild(this._toggleButton));
        contentColumn.appendChild(this._body.parentNode.removeChild(this._body));
        this._element.appendChild(table);
    },
    _onSlideToggleHandler: function(args) {
        if(this._slideEffect!=null&&this._slideEffect.isRunning) return;
        var h=this.get_events().getHandler('slidetoggle');
        if(h) h(this,args);
        var target=args.target;
        var expanded=Typps.Utility.containsCssClass(target, 'expanded');
        if(expanded){
            this._removeCssClass(target, 'expanded');
            this._addCssClass(target,'collapsed');
        }
        else
        {
            this._removeCssClass(target, 'collapsed');
            this._addCssClass(target,'expanded');
        }
        if(this._enableEffects&&this._hasElementNode()) {
            this._startSlideEffect();
        } else {
            var container=null;
            var body=this._body;
            if(this._orientation==1&&!this._enableEffects)
                container=body.parentNode;

            var display=body.style.display=='none'?'':'none';
            body.style.display=display;
            if(container!=null)
                container.style.display=display;
        }
    },
    _hasElementNode: function() {
        for(var num1=0;num1<this._body.childNodes.length;num1++) {
            var node=this._body.childNodes[num1];
            if(node.nodeType==1)
                return true;
        }
        return false;
    },
    _startSlideEffect: function() {
        var display=this._body.style.display=='none'?true:false;
        this._body.parentNode.style.display='';
        var horizontalSlide=(this._orientation==1);
        var from=horizontalSlide?this._bodyWidth:'100%';
        var to=horizontalSlide?'1':'0%';
        if(display) {
            from=horizontalSlide?'1':'0%';
            to=horizontalSlide?this._bodyWidth:'100%';
        }
        if(this._slideEffect==null) {
            this._slideEffect=new Spry.Effect.Slide(this._body.id,{ from: from,to: to,toggle: true,duration: 500,horizontal: horizontalSlide });
            /*webkit has a rendering bug https://bugs.webkit.org/show_bug.cgi?id=16148 ;
            workaround by setting min width to 1 in value from/to and
            set the container to display:none via the observers.*/
            if(horizontalSlide)
                this._registerObservers(this._slideEffect);
        }
        this._slideEffect.start();
    },
    _registerObservers: function(effect) {
        var context=this;
        var observe=Function.createCallback(context._onObserverHandler,{ context: context });
        effect.addObserver(observe);
    },
    _onObserverHandler: function(notificationType,eff,data,args) {
        var context=args.context;
        var isVertical=(context._orientation==1);
        switch(notificationType) {
            case 'onStep':
                break;
            case 'onPreEffect':
                break;
            case 'onPostEffect':
                if(parseInt(context._body.style.width)==1)
                    context._body.parentNode.style.display='none';
                break;
            case 'onCancel':
                break;
        }
    },
    _toggleCssClass: function (elem,className) {
        Typps.Utility.addRemoveClassName(elem,className,Typps.Perform.Toggle);
    },
    _addCssClass: function (elem,className) {
        Typps.Utility.addRemoveClassName(elem,className,Typps.Perform.Add);
    },
    _removeCssClass: function (elem,className) {
        Typps.Utility.addRemoveClassName(elem,className,Typps.Perform.Remove);
    }
}
Typps.SlidePane.registerClass('Typps.SlidePane',Sys.UI.Control);
Typps.SlidePane.Orientation=function() { };
Typps.SlidePane.Orientation.prototype=
{
    Horizontal: 0,
    Vertical: 1
}
Typps.SlidePane.Orientation.registerEnum('Typps.SlidePane.Orientation');
Typps.SlidePane.Float=function() { };
Typps.SlidePane.Float.prototype=
{
    Left: 0,
    Right: 1
}
Typps.SlidePane.Float.registerEnum('Typps.SlidePane.Float');
// Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler
// invoke Sys.Application.notifyScriptLoaded to notify ScriptManager 
// that this is the end of the script.
if(typeof (Sys)!=='undefined') Sys.Application.notifyScriptLoaded();
